<template>
	<view class="container">
		<view class="top">
			<view class="carousel-container">
				<swiper class="carousel" current="0" circular="true" autoplay="true" interval="3000">
					<swiper-item  class="carousel-item">
						<image :src="detail.first_image" mode="scaleToFill" />
					</swiper-item>
				</swiper>
			</view>
			<view class="top-left">
				<!-- <view class="top-right"><image mode="aspectFill" :src="detail.shop_photo"></image></view> -->
				<text class="title">{{ detail.shop_name }}</text>
				
				<text v-if="detail.state == 2" class="store">审核中</text>
				<text v-if="detail.state == 3" class="store">已拒绝</text>
				<text v-if="detail.state == 3" class="store">原因：{{ detail.refusereason }}</text>
			</view>
			
		</view>
		
		<view class="location-box b-b" @tap="mapnav">
			<text class="wlIcon-weizhi1 wanl-text-black"></text>
			<text class="line-content">{{ detail.areaaddress }}{{ detail.address}}</text>
			<text class="wlIcon-fabu wanl-text-black"></text>
		</view>
		<view class="saletime-box b-b">
			<text class="wlIcon-shijian wanl-text-black"></text>
			<text class="line-content">营业时间 {{ detail.open_shijian }}</text>
		</view>
		
		<view class="mobile-box b-b">
			<text class="wlIcon-dianhua wanl-text-black"></text>
			<text class="line-content" @tap="makePhoneCall">
				<text class="telephone">{{ detail.mobile }}</text>
			</text>
		</view>
		<view class="introduce-box b-b">
			<text class="wlIcon-daipinglun wanl-text-black"></text>
			<text class="line-content">{{ detail.shop_dec == '' ? '这家伙很懒，什么都没留下' : detail.shop_dec }}</text>
		</view>
		<view class="collection-box b-b" @tap="toQrcode" v-show="qecode">
			<text class="wlIcon-gerenerweima wanl-text-black"></text>
			<text class="line-content">店铺收款二维码</text>
		</view>
		<view v-if="owner == 0" class="btn"><text class="mix-btn" @click="pay()">立即买单</text></view>
		<view v-if="owner == 1" class="btn"><text class="mix-btn" @click="edit()">修改</text></view>
	</view>
</template>
<script>
// import Map from '@/js_sdk/ms-openMap/openMap.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			localshop_id: 0,
			detail: {},
			stateTip: '',
			owner: 0,
			qecode:false
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
	},
	computed: {
	...mapState(['user', 'statistics','common'])
	},
	methods: {
		async loadData() {
			this.$api.get({
				url: '/wanlshop/Small/shopinfoperson',
				data:{
					loaclhost_id: this.id
				},
				success: res => {
					console.log(this.user)
					let detail = res;
					//detail.DoorPic = this.$image + '/merchant/' + detail.DoorPic;
					this.detail = detail;
					this.localshop_id=detail.localshop_id
					// if (this.hasLogin) {
						if (detail.user_id == this.user.id) {
							this.owner = 1;
						} else {
							this.owner = 0;
						}
						if(detail.state==1){
							this.qecode=true
						}
					}
					})
			
		},
		//导航
		mapnav() {
			console.log('1111')
			
			let latitude = parseFloat(this.detail.Latitude)
			let longitude = parseFloat(this.detail.Longitude)
			//console.log(this.detail,'11111111');
			
			uni.openLocation({
					latitude:latitude ,//纬度 - 目的地/坐标点
			 		longitude:longitude, //经度 - 目的地/坐标点
					scale:18,
					name:this.detail.areaaddress,
					address:this.detail.address,
				    });
			
			//Map.openMap(this.detail.Latitude, this.detail.Longitude, this.detail.Addr, 'gcj02');
			// Map.openMap(30.428291 , 114.481495 , '湖北省武汉市江夏区东湖新技术开发区光谷三路777号', 'gcj02')
		},
		toQrcode() {
			uni.navigateTo({
				url: '/pages/user/merchant/qrcode?id=' + this.id
			});
		},
		makePhoneCall: function() {
			uni.makePhoneCall({
				phoneNumber: this.detail.Mobile
			});
		},
		showlicense(path) {
			path = this.$image + '/merchant/' + path;
			uni.navigateTo({
				url: '/pages/user/merchant/license?imgsrc=' + path
			});
		},
		pay() {
			 url = '';
			
			let url = '/pages/user/merchant/pay?id=' + this.id;
			uni.navigateTo({
				url: url
			});
		},
		edit() {
			uni.navigateTo({
				url: '/pages/user/merchant/orderstep1?pagenum=4&type=2'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.carousel-container {
	// position: absolute;
	// border-radius: 18rpx;
	padding: 0 30rpx;
}
.carousel {
	margin-top: 20upx;
	.carousel-item {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 100%;
			border-radius: 10rpx;
		}
	}
}
.container {
	background-color: $page-color-base;
	width: 100%;
	padding: 10upx 20upx;
}

.top {
	display: flex;
	flex-direction: column-reverse;
}
.top-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	//padding-right: 60upx;
	flex: 1;
	height: 80upx;
	line-height: 80upx;
	.title {
		flex-wrap: wrap;
		font-size: $font-lg;
		font-weight: bold;
	}
	.shop-star {
		height: 30upx;
		line-height: 30upx;
		display: flex;
		flex-direction: row;
		.star:before {
			content: '\e63c';
			color: $base-color;
			font-size: $font-base;
			margin-right: 8upx;
			vertical-align: middle;
		}
	}
	.store {
		color: $base-color;
		font-size: $font-base;
	}
}
.top-right {
	font-size: 0;
	image {
		width: 190upx;
		height: 200upx;
	}
}
.license-box,
.location-box,
.saletime-box,
.pointsrate-box,
.mobile-box,
.introduce-box,
.collection-box {
	position: relative;
	padding: 30upx 0upx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.b-b:after {
	left: 0upx;
}
.line-content {
	margin-left: 40upx;
	font-size: $font-base;
	flex: 1;
	.telephone {
		color: #3f9adb;
	}
}
.license:after {
	content: '\e604';
	width: 80upx;
}
.location:after {
	content: '\e603';
	width: 80upx;
}
.daohang:after {
	float: right;
	content: '\e614';
	width: 60upx;
	text-align: right;
	padding-right: 8rpx;
}
.saletime:after {
	content: '\e947';
	width: 80upx;
}
.pointsrate:after {
	content: '\e61e';
	width: 80upx;
}
.collection:after {
	content: '\e60c';
	width: 80upx;
}
.tel:after {
	content: '\e6ab';
	width: 80upx;
}
.introduce:after {
	content: '\e629';
	width: 80upx;
}
.icon-you:after {
	float: right;
	width: 60upx;
}
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.mix-btn {
	margin-top: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 700upx;
	height: 90upx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 5upx;
}
</style>
